import { useEffect, useState, useRef } from "react"
import { List, Switch } from 'antd-mobile'
import NavBar from '../../components/NavBer'


function ChangeCard() {
    const [cards, setCards] = useState([])

    useEffect(() => {
        const data = JSON.parse(localStorage.getItem('cards')) || [];
        setCards(data);
    }, []);

    useEffect(() => {
        localStorage.setItem('cards', JSON.stringify(cards));
    }, [cards]);

    const changeCard = (id) => {
        // console.log(id);
        const newList = cards.map(item => item.id == id ? { ...item, isable: !item.isable } : item)
        // console.log(newList);
        setCards(newList)
    }


    return (
        <div>
            <NavBar title='编辑卡片' />

            <List>
                {cards.map(item => (
                    <List.Item
                        key={item.id}
                        extra={
                            <Switch checked={item.isable}
                                onChange={() => { changeCard(item.id) }} />
                        }>
                        {item.title}
                    </List.Item>
                ))}

            </List>

        </div>
    );
}

export default ChangeCard;